<template>
    <div class="app-container">
        <div class="filter-container">
            <el-input v-model="query.name" class="filter-item w-200" size="medium" placeholder="种类名称"></el-input>
            <el-button class="filter-item" size="medium" icon="el-icon-search" @click="fetchList(true)">搜 索</el-button>
            <el-button class="filter-item" type="primary" size="medium" icon="el-icon-plus" style="float: right" v-permission="'food-types.store'" @click="addFoodType">新 增</el-button>
        </div>
        <el-table :data="foodTypeData" v-loading="loading" border style="width: 100%">
            <el-table-column width="50px" label="#" align="center">
                <template slot-scope="scope" >
                    {{query.size * (query.page-1) + scope.$index + 1}}
                </template>
            </el-table-column>
            <el-table-column prop="name" label="名称" align="center"></el-table-column>
            <el-table-column prop="description" label="描述" align="center"></el-table-column>
            <el-table-column prop="count" label="菜品数量" width="200px" align="center"></el-table-column>
            <el-table-column label="状态" width="200px" align="center">
                <template slot-scope="scope">
                    <i class="el-icon-check" v-if="scope.row.status === 1" />
                    <i class="el-icon-close" v-else />
                </template>
            </el-table-column>
            <el-table-column prop="updated_at" label="更新时间" align="center" width="300px"></el-table-column>
            <el-table-column label="操作" align="center" width="200px">
                <template slot-scope="scope">
                    <el-button class="filter-item" type="primary" size="mini" v-permission="'food-types.update'" icon="el-icon-edit" @click="editFoodType(scope.row)">编 辑</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination-container">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="query.page"
                    :page-sizes="[10, 20, 30, 50]"
                    :page-size="query.size"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>
        <el-dialog :title="foodTypeFormTitle" width="600px" :visible.sync="dialogVisible">
            <el-form :model="foodTypeForm" :rules="rules" ref="foodTypeForm" label-width="80px" class="demo-foodTypeForm">
                <el-form-item label="名称" prop="name">
                    <el-input style="width: 90%" v-model="foodTypeForm.name"></el-input>
                </el-form-item>
                <el-form-item label="描述" prop="description">
                    <el-input style="width: 90%" type="textarea" v-model="foodTypeForm.description"></el-input>
                </el-form-item>
                <el-form-item label="排序" prop="sort">
                    <el-input-number v-model="foodTypeForm.sort" :min="1" label="排序"></el-input-number>
                </el-form-item>
                <el-form-item label="状态" prop="status">
                    <el-switch
                            v-model="foodTypeForm.status"
                            active-color="#13ce66"
                            inactive-color="#ff4949"
                            :active-value="1"
                            :inactive-value="0">
                    </el-switch>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible=false">取消</el-button>
                <el-button type="primary" @click="submitFoodTypeForm" :loading="btnLoading">保存</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import { fetchFoodTypes, addFoodType, editFoodType } from '@/api/food'
    export default {
      name: 'type',
      data() {
        return {
          total: 0,
          query: {
            name: '',
            size: 10,
            page: 1
          },
          option: '',
          loading: false,
          foodTypeData: [],
          btnLoading: false,
          dialogVisible: false,
          foodTypeFormTitle: '',
          foodTypeForm: {
            id: 0,
            name: '',
            description: '',
            sort: 1,
            status: 1
          },
          rules: {
            name: [
              { required: true, message: '请输入菜品种类名称', trigger: ['blur', 'change'] },
              { min: 2, max: 20, message: '输入的菜品种类名称长度在2 ~ 20个字符之间' }
            ]
          }
        }
      },
      methods: {
        // 提交菜品种类表单
        submitFoodTypeForm() {
          this.btnLoading = true
          this.$refs['foodTypeForm'].validate((valid) => {
            if (valid) {
              // 通过校验
              if (this.option === 'add') {
                addFoodType(this.foodTypeForm).then(res => {
                  this.$message.success('添加成功')
                  this.fetchList()
                  this.dialogVisible = false
                  this.btnLoading = false
                }).catch(err => {
                  this.$handleNotFound(err)
                  this.btnLoading = false
                })
              }
              if (this.option === 'edit') {
                editFoodType(this.foodTypeForm, this.foodTypeForm.id).then(res => {
                  this.$message.success('编辑成功')
                  this.fetchList()
                  this.dialogVisible = false
                  this.btnLoading = false
                }).catch(err => {
                  this.$handleNotFound(err, '菜品种类不存在')
                  this.btnLoading = false
                })
              }
            } else {
              this.btnLoading = false
            }
          })
        },
        // 新增菜品种类
        addFoodType() {
          this.resetForm('foodTypeForm')
          this.option = 'add'
          this.foodTypeFormTitle = '新增菜品种类'
          this.dialogVisible = true
          Object.assign(this.foodTypeForm, this.$options.data().foodTypeForm)
        },
        // 编辑菜品种类
        editFoodType(row) {
          if (this.$refs['foodTypeForm'] !== undefined) {
            this.$refs['foodTypeForm'].clearValidate()
          }
          Object.existAssign(this.foodTypeForm, row)
          this.option = 'edit'
          this.foodTypeFormTitle = '编辑菜品种类'
          this.dialogVisible = true
        },
        // 菜品种类列表
        fetchList(resetPage = false) {
          this.loading = true
          if (resetPage === true) {
            this.query.page = 1
          }
          fetchFoodTypes(this.query).then(res => {
            this.foodTypeData = res.data
            this.total = res.meta.total
            this.loading = false
          })
        },
        // 重置表单验证
        resetForm(formName) {
          // 第一次新增数据时为空对象undefined
          if (this.$refs[formName] !== undefined) {
            this.$refs[formName].resetFields()
          }
        },
        handleSizeChange(size) {
          this.query.size = size
          this.fetchList()
        },
        handleCurrentChange(page) {
          this.query.page = page
          this.fetchList()
        }
      },
      created() {
        this.fetchList()
      }
    }
</script>

<style scoped>
    .el-icon-check{
        color: green;
    }
    .el-icon-close{
        color: red;
    }
</style>
